<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href=""><style>
    body{
        margin: 0;
    }
 header {
    height: 700px;
    background-image: url(b.jpg);
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
         }

button{
   position: relative;
   top: 100px；
      width:200px;
   height: 60px;
      background-color:transparent;
      color: #fff;
   font-size: 24px;

     border: 1px solid #fff;
    outline:none;
     border-radius: 10px;
     cursor: pointer;
      }
    button:hover{
        background-color: #fff;
        color: red;
    }
    div{
        height: 300px;
        display:flex;
        align-items: center;
        justify-content:center;
    }
    span{
        font-size: 64px;
        color: #e96d4f;
    }
    article{
         height: 1000px;
       background-image: url(a.jpg);

       background-attachment: fixed;


    }
    main {
        height: 580px;
        position: relative;
    }
    main>img {
        position:absolute;
        bottom: 0;
        left: 180px;
    }
   main>aside {
    width: 500px;
    position: absolute;
    top: 100px;
    right: 200px;
    text-align: right;
    }
    aside>p{
        font-size: 20px;
        color: #555;
    }
    map{
        display: block;
        width: 1oo%;
        height: 600px;
    }
    section{
        height: 600px;
        display:flex;
        align-items: center;
        justify-content:center;
     }
     section>img
           {
        margin: 0 50px;
             }
             video{
                width: 100%;
             }
             nav{
                height: 80px;
                width: 100%;
                background-color: rgba(18,183,245,0.5);
             }
    li{
        line-height: 80PX;
        display: inline-block;
        padding: 0 30PX;
        cursor: pointer;
    }
    li:hover{
        background-color: #12b7f5
    }
    li>a{
        text-decoration: none;
        fonr-size:22px;
        color: #fff;
    }
    nav img{
        position: relative;
        top: 15px;
        margin: 0 50px;
    }
    footer{
        height: 150px;
        background-color: #2a2a2a;
    }
    figure{
        width: 1088PX;
        margin: 0 AUTO;
        padding-top: 5OPX;
       text-align: center;
    }

    </style>

</head>
<body>
<nav>
<a href=""><img src="qq.png" alt=<title=""></a>
<li><a href="">首页</a></li>
<li><a href="">下载</a></li>
<li><a href="">动态</a></li>
</nav>
<header>

<button>碧波潭春后雨景</button>
</header>
<div>
    <span>乐·在·欣·赏</span>
    </div>
        <article></article>
        <main>
<img src="f.png">
<aside>
    <h1>享受，是跨越千山万水的风景！</h1>
    <p>无论何地只要心自由，哪里都是享受！</p>
    <p><a href="" title=""></a></p>
</aside>
<section>
<img src="22222222 (1).png" alt="">

<audio src="888.mp3" autoplay  controls ></audio>

<img src="22222222 (2).png" alt="">

</section>
        </main>
        <video src="大鱼海棠.mp4" autoplay controls></video>
<map id="here"></map>
<footer>
<hr>
<figure>
    <figcaption>
        <h6>Copyright 360.cn. All Rights Reserved.</h6>
        <h6>西安天讯 版权所有</h6>
    </figcaption>

</figure>
</footer>




</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(106.51,33.2 );
    map.centerAndZoom(point, 12);
    window.map = map;
}
initMap();
</script>

</html>